{% extends "layout.html" %}
{% block body %}
<div class="page-header">
  <ul class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="{{ url_for('classify', type=book.classify) }}">{{ book.classify }}</a></li>
    <li class="active">{{ book.en_title }}</li>
  </ul>
  <h1 id="containers">{{ book.en_title }} <sub>{{ book.author }}</sub>
    <button id="book_star" type="button" class="btn btn-default btn-lg" {% if user_star %}data-star="yes"{% else %}data-star="no"{% endif %} >
      {% if user_star %}
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <em>{{ book.star_count }}</em> Stars
      {% else %}
      <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> <em>{{ book.star_count }}</em> Stars
      {% endif %}
    </button>
  </h1>
  {% if book.description %}
  <blockquote>{{ book.description }}</blockquote>
  {% endif %}
</div>
      
<div class="jumbotron">
  <div class="entries">
  {% for entry in entries %}
    <p><a href="{{ url_for('book_chapter', book_id=entry.book_id, chapter_id=entry.id) }}">{{ entry.en_name }}</a></p>
  {% else %}
    <p><em>Unbelievable.  No entries here so far</em></p>
  {% endfor %}
  </div>
</div>

<div class="page-header"><h3>
  <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Comments List
</h3></div>
<ul class="media-list">
{% for comment in comments %}
{% if comment.post_comment_id==0 %}
  {% include 'comment_item.html' %}
{% endif %}
{% else %}
  <p><em>Unbelievable.  No comments here so far</em></p>
{% endfor %}
</ul>

<div class="page-header"><h3>
  <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Leave A Reply
  <a name="comment">&nbsp;</a>
</h3></div>
{% if g.user %}
<form class="form-horizontal" method="post" action="{{ url_for('add_comment') }}">
  <input type="hidden" name="book_id" value="{{ book.id }}">
  <input type="hidden" name="post_comment_id" id="post_comment_id" value="0">
  <fieldset>
    <div class="form-group">
      <div class="col-lg-12">
        <textarea class="form-control" name="content" rows="3" required="required" minlength="5" id="textArea"></textarea>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-12">
        <button type="submit" class="btn btn-primary">Comment</button>
      </div>
    </div>
  </fieldset>
</form>
{% else %}
<form class="form-horizontal" method="post" action="{{ url_for('add_comment') }}">
  <input type="hidden" name="book_id" value="{{ book.id }}">
  <fieldset>
    <div class="form-group">
      <div class="col-lg-12">
        You must be logged in to post a comment. <a href="{{ url_for('login') }}">Log In</a> Or <a href="{{ url_for('register') }}">Create A New Account</a>
      </div>
    </div>
  </fieldset>
</form>
{% endif %}
{% endblock %}

{% block footer %}
<script type="text/javascript">
function reply(comment_id) {
  $('#textArea').attr('placeholder', 'Reply To Comment #' + comment_id);
  $('#textArea').focus();
  $('#post_comment_id').val(comment_id);
  location.href = "#comment";
}

$(function(){
  var book_id = '{{ book.id }}';
  $('#book_star').on('click', function(){
    var star = $(this).data('star');
    $.post("{{ url_for('favorite') }}", {"book_id":book_id, "star":star}, function(data){
      var star_class = data.star ? 'glyphicon-star' : 'glyphicon-star-empty';
      $('#book_star').html('<span class="glyphicon '+star_class+'" aria-hidden="true"></span> <em>'+data.star_count+'</em> Stars');
    }, "json");
  });
});
</script>
{% endblock %}

{% block title %}{{ book.en_title }},{{ book.classify }} novel - By {{ book.author }} - JiangHu Novel{% endblock %}
{% block keywords %}{{ book.en_title }},{{ book.classify }} novel,{{ book.author }}{% endblock %}
{% block description %}{{ book.en_title }} novel chapter list{% endblock %}
